<template>
	<div class="friend">
		<div class="left"><left-column></left-column></div>
		<div class="main">
			<!-- 搜索好友 -->
			<el-button @click="openSearch" class="elbtn" e="primary" icon="el-icon-search"></el-button>
			<el-dialog title="提示" :visible.sync="dialogVisible" width="50%" @close="flashWeb">
				<div style="display: flex;justify-content:center;align-items: center;">
					<el-input style="flex: 12;" placeholder="请输入好友昵称" v-model="input" clearable></el-input>
					<svg @click="searchFriend" style="font-size: 20px;flex: 1;cursor: pointer;" class="icon" aria-hidden="true"><use xlink:href="#icon-icon-find"></use></svg>
				</div>
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column prop="name" label="用户名" width="150"></el-table-column>
					<el-table-column prop="introduce" label="个人介绍" width="150"></el-table-column>
					<el-table-column prop="studyTime" label="番茄钟时长" width="200"></el-table-column>
					<el-table-column :label="searchOrRec">
						<template slot-scope="scope">
							<el-button @click="addFriend(scope.$index)" v-bind:disabled="tableData[scope.$index].added === 0 ? false : true" type="primary">添加好友</el-button>
						</template>
					</el-table-column>
				</el-table>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>

			<div class="chooseFun">
				<span class="choose1" @click="handleClick('friend')">我的好友</span>
				<span class="choose2" @click="handleClick('friendTomato')">好友番茄排行榜</span>
				<span class="choose3" @click="handleClick('allTomato')">番茄总排行榜</span>
			</div>
			<!-- 我的好友 -->
			<div v-show="showMoudle == 'friend'" class="myFriend" v-for="(item, index) in friendInfor" :key="index">
				<div class="friendContent">
					<span class="headImg">
						<img style="border-radius: 50%;width: 50px;height: 50px;" :src="require('../headImg/' + item.headImg + '.jpg')" />
						<svg class="icon" aria-hidden="true" style="position: absolute;" v-show="!item.online"><use xlink:href="#icon-yuan"></use></svg>
						<svg class="icon" aria-hidden="true" style="position: absolute;" v-show="item.online"><use xlink:href="#icon-icon--yes"></use></svg>
					</span>
					<div class="intr">
						<div style="text-align: left;font-size: 22px;">
							{{ item.name }}
							<svg class="icon" v-show="item.gender" aria-hidden="true"><use xlink:href="#icon-nan1"></use></svg>
							<svg class="icon" v-show="!item.gender" aria-hidden="true"><use xlink:href="#icon-nv"></use></svg>
						</div>
						<div style="text-align: left;font-size: 14px;">{{ item.intr }}</div>
					</div>
				</div>
			</div>
			<!-- 好友番茄钟 -->
			<div v-show="showMoudle == 'friendTomato'" class="myFriend" v-for="(item, index) in friendInfor" :key="index + item.intr">
				<div class="friendContent">
					<span style="font-family: Times New Roman;height: 50px;line-height: 50px;margin-left: 10px;">{{ index + 1 }}</span>
					<span class="headImg"><img style="border-radius: 50%;width: 50px;height: 50px;" :src="require('../headImg/' + item.headImg + '.jpg')" /></span>
					<div class="intr">
						<div style="text-align: left;font-size: 22px;">
							{{ item.name }}
							<svg class="icon" v-show="item.gender" aria-hidden="true"><use xlink:href="#icon-nan1"></use></svg>
							<svg class="icon" v-show="!item.gender" aria-hidden="true"><use xlink:href="#icon-nv"></use></svg>
						</div>
						<div style="text-align: left;font-size: 14px;">{{ item.intr }}</div>
					</div>
					<div style="justshowy-content: center;align-items: center;display: flex;font-size: 20px;">
						<svg class="icon" aria-hidden="true" style="font-size: 25px;"><use xlink:href="#icon-fanqie"></use></svg>
						<span>{{ item.studyTime }}分钟</span>
					</div>
				</div>
			</div>
			<!-- 全局番茄钟 -->
			<div v-show="showMoudle == 'allTomato'" class="myFriend" v-for="(item, index) in friendInfor" :key="index + item.name">
				<div class="friendContent">
					<span style="font-family: Times New Roman;height: 50px;line-height: 50px;margin-left: 10px;">{{ index + 1 }}</span>
					<span class="headImg"><img style="border-radius: 50%;width: 50px;height: 50px;" :src="require('../headImg/' + item.headImg + '.jpg')" /></span>
					<div class="intr">
						<div style="text-align: left;font-size: 22px;">
							{{ item.name }}
							<svg class="icon" v-show="item.gender" aria-hidden="true"><use xlink:href="#icon-nan1"></use></svg>
							<svg class="icon" v-show="!item.gender" aria-hidden="true"><use xlink:href="#icon-nv"></use></svg>
						</div>
						<div style="text-align: left;font-size: 14px;">{{ item.intr }}</div>
					</div>
					<div style="justify-content: center;align-items: center;display: flex;font-size: 20px;">
						<svg class="icon" aria-hidden="true" style="font-size: 25px;"><use xlink:href="#icon-fanqie"></use></svg>
						<span>{{ item.studyTime }}分钟</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import leftColumn from './leftColumn.vue';
export default {
	components: {
		leftColumn
	},
	data() {
		return {
			/* 搜索框 */
			dialogVisible: false, //控制搜索框的显示隐藏
			input: '', //搜索框的输入框内容（好友id）
			tableData: [],
			//是否以及是你的好友
			added: 0,
			//设置推荐还是搜索结果
			searchOrRec: '推荐好友',
			showMoudle: 'friend',
			friendInfor: []
		};
	},
	name: 'friend',
	methods: {
		handleClick(tab) {
			let item = [document.querySelector('.choose1'), document.querySelector('.choose2'), document.querySelector('.choose3')];
			for (let i of item) {
				i.style = 'color: #2c3e50;';
			}
			this.$nextTick(function() {
				switch (tab) {
					case 'friend':
						this.showMoudle = 'friend';
						item[0].style = 'color: #51C4D3;';
						this.searchMyFriednds();
						break;
					case 'friendTomato':
						this.showMoudle = 'friendTomato';
						item[1].style = 'color: #51C4D3;';
						this.friendsTomato();
						break;
					case 'allTomato':
						this.showMoudle = 'allTomato';
						item[2].style = 'color: #51C4D3;';
						this.allTomato();
						break;
				}
			});
		},
		openSearch() {
			this.dialogVisible = true;
			this.$api.recommend(localStorage.uid).then(res => {
				console.log(res);
				this.tableData = [];
				for (let i = 0; i < res.data.length; i++) {
					this.tableData.push({
						name: res.data[i].name,
						introduce: res.data[i].introduce,
						studyTime: res.data[i].studyTime + '分钟',
						added: res.data[i].added,
						id: res.data[i].id
					});
				}
			});
		},
		searchFriend() {
			this.$api.searchFriends(this.input, localStorage.getItem('uid')).then(res => {
				console.log(res);
				this.tableData = [];
				if (res.data) {
					this.tableData.push({
						name: res.data.name,
						introduce: res.data.introduce,
						studyTime: res.data.studyTime + '分钟',
						added: res.data.added,
						id: res.data.id
					});
				} else {
					this.$message('搜索不到结果，请检查昵称是否有误');
				}

				this.searchOrRec = '搜索结果';
			});
		},
		addFriend(row) {
			console.log(this.tableData);
			console.log(localStorage.uid, this.tableData[row].id);
			this.$api.addFriend(localStorage.uid, this.tableData[row].id).then(res => {
				if (res.code === 200) {
					this.$message({
						message: '添加成功',
						type: 'success'
					});
					this.tableData[row].added = 1;
				} else {
					this.$message.error('添加好友失败，请检查网络，稍后重试');
				}
			});
		},

		//查找我的好友
		searchMyFriednds() {
			this.$api.showFriends(localStorage.uid).then(res => {
				console.log(res);
				this.friendInfor = [];
				for (let i = 0; i < res.data.length; i++) {
					this.friendInfor.push({
						name: res.data[i].name,
						intr: res.data[i].introduce || '暂无签名',
						studyTime: res.data[i].studyTime,
						headImg: res.data[i].portrait,
						gender: res.data[i].gender,
						online: res.data[i].onLine
					});
					console.log(res.data[i].portrait);
				}
			});
		},
		//好友番茄排行榜
		friendsTomato() {
			this.friendInfor = [];
			this.$api.frankinglist(localStorage.uid).then(res => {
				console.log(res);
				for (let i = 0; i < res.data.length; i++) {
					this.friendInfor.push({
						name: res.data[i].name,
						intr: res.data[i].introduce || '暂无签名',
						studyTime: res.data[i].studyTime,
						headImg: res.data[i].portrait,
						gender: res.data[i].gender,
						online: res.data[i].onLine
					});
				}
			});
		},
		//番茄总排行榜
		allTomato() {
			this.friendInfor = [];
			this.$api.rankinglist().then(res => {
				console.log(res);
				for (let i = 0; i < res.data.length; i++) {
					this.friendInfor.push({
						name: res.data[i].name,
						intr: res.data[i].introduce || '暂无签名',
						studyTime: res.data[i].studyTime,
						headImg: res.data[i].portrait,
						gender: res.data[i].gender,
						online: res.data[i].onLine
					});
				}
			});
		},
		//刷新页面用
		flashWeb() {
			this.handleClick('friend');
		}
	},
	created() {
		this.searchMyFriednds();
	},
	mounted() {
		document.querySelector('.choose1').style = 'color: #51C4D3;';
	}
};
</script>

<style scoped="scoped" lang="scss">
.chooseFun {
	display: flex;
	width: 100%;
	justify-content: space-around;
	background-color: white;
	margin: 5px 0 15px 0;
	height: 40px;
	line-height: 25px;
	border-bottom: 2px solid #d8e3e7;
	box-sizing: border-box;
}
.chooseFun span {
	margin: 5px 0;
	cursor: pointer;
}
.myFriend {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}
.friendContent {
	background-color: white;
	width: 90%;
	height: 50px;
	display: flex;
	padding: 10px 0;
	margin: 5px 0;
	border-radius: 15px;
	.headImg {
		margin: 0 25px 0 15px;
		position: relative;
	}

	.intr {
		width: 75%;
		display: flex;
		flex-direction: column;
	}
}

.friend {
	display: flex;
}
.left {
	width: 13%;
	height: 100vh;
	background-color: #2c3e50;
}
.main {
	flex: 1;
	height: 100%;
	background-color: #ebeef56e;
	min-height: 100vh;
}
.all {
	flex: 1;
	height: 100%;
}
.elbtn {
	position: fixed;
	padding-top: 11px;
	padding-left: 12px;
	font-size: 25px;
	right: 40px;
	bottom: 130px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
</style>
